<template>
  <div class="cash">
    <div class="tabs-box">
      <div class="tabs">

        <div v-show="alipayShow">
          <img
            src="../../assets/images/102.png"
            alt=""
          >
          <span>支付宝提现</span>
        </div>
        <div v-show="weixinShow">
          <img
            src="../../assets/images/103.png"
            alt=""
          >
          <span>微信提现</span>
        </div>
        <!--<div v-show="chooseShow">-->
          <!--<img-->
            <!--src="../../assets/images/500.png"-->
            <!--alt=""-->
          <!--&gt;-->
          <!--<span>添加提现账户</span>-->
        <!--</div>-->


        <!--<div><i class="icon iconfont icon-xiangyou"></i></div>-->
      </div>

      <div class="amounts">
        <div class="content">
          <span class="title">提现金额</span><br/>
          <span class="icon">￥</span>
          <input type="number" placeholder="" @focus="withdraw" v-model="rowInfo.money" disabled style="background-color: #fff">
         <hr>
          <span class="tips">提现时间 {{rowInfo.created_at}}</span>
        </div>
      </div>

    <div class="submit">
      <button v-if="rowInfo.status==0" >预计1-2天内到账，请注意查收哦</button>
      <button v-else-if="rowInfo.status==1" style="background-color: green;opacity:0.7" >提现已处理，请注意查收哦</button>
      <button v-else-if="rowInfo.status==2" >提现拒绝，余额已返回原账户</button>
      <!--"status": 2,//0待审核 1.审核通过已打款 2拒绝提现-->
    </div>

    </div> 
  </div>
</template>
<script>
import myHeader from "../header/index.vue";
import { getUserWithdrawInfo } from "../../api/user";
import { Toast } from 'vant';
export default {

  data() {
    return {
      submitData: {
        id:0,
      },
      rowInfo:{},
      alipayShow:false,
      weixinShow:false,
    };
  },
  methods: {
    withdraw(){
      this.wait = false
      this.wait2 = true
    },

    withdrawInfo(){
      if(this.submitData<=0){
        return
      }
      getUserWithdrawInfo(this.submitData).then(res => {
          this.rowInfo = res.data;
          // console.log(this.rowInfo.type);
        // "type": 1,//1支付宝 2银行卡 3微信
          if(this.rowInfo.type==1){
            this.alipayShow = true
          }else if(this.rowInfo.type==3){
            this.weixinShow = true
          }
        });
    },

  },
  created(){
    this.submitData.id = this.$route.query.id
    this.withdrawInfo();
    // http://m.mosecc.com/withdrawDatail?id=1
  }
};
</script>

<style lang="scss">
.cash {
  width: 100%;
  overflow-x: hidden;
  // height: 100%;
  background-color: #f5f5f5;
  padding-bottom: 48px;
  .banner{
    width: 100%;
    height: 180px;
    background-image: linear-gradient(160deg, #fd2039 20%,#f79971 80%);
    position: relative;
    left: 0;
    background-color: #f5f5f5;
    top: 0;
    color:#FFF; 
    font-size:14px;
    font-weight:300;
    .detailed{
      float:right;
      padding: 15px 15px; 
    }
    .info{ 
       padding: 55px 15px; 
      .amount{ 
        font-size:50px;
        font-weight:400;
      }
    }
  }
  .tabs-box {
    width: 100%;
    margin-top: 10px;
    .tabs {
      margin-bottom: 10px;
      width: 100%;
      height: 48px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 0 15px;
      background-color: #fff;
      border-bottom: 1px solid #eee;
      img {
        vertical-align: middle;
        width: 20px;
      }
      span {
        vertical-align: middle;
        padding-left: 10px;
        font-size: 14px;
      }
    }
    .amounts {
      margin-bottom: 10px;
      width: 100%;
      height: 138px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 0 15px;
      background-color: #fff;
      border-bottom: 1px solid #eee;
      img {
        vertical-align: middle;
        width: 20px;
      }
      span {
        vertical-align: middle;
        padding-left: 10px;
        font-size: 14px;
      }
      .content{
          width:100%;
          height:100px;
          float:flex;
      }
      .title{
          color:#888;
          font-size:14px;  
      }
       .tips{
          color:#888;
          font-size:12px;  
      }
      .icon{
          font-size:32px;  
          width:15%;
          float:left; 
      }
      input{
          font-size:32px;  
          width:85%;
          float:left;   
          border:none;
      } 
          hr { 
            width:94%;
            margin:0 auto; 
            border: 0;
            height: 0;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
            border-bottom: 1px solid rgba(255, 255, 255, 0.3); 
            }
    }
       .submit {
        width: 100%;
        text-align: center;
        padding: 20px 0; 
        button {
            width: 90%;
            height: 40px;
            outline: none;
            border: none;
            background-color: #e71434;
            font-size: 14px;
            color: #fff;
            border-radius: 5px;
            opacity:0.2;
        }
    }
  }
}
</style>


